<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        /* #allmap{height:500px;width:100%;}
        #r-result{width:100%; font-size:14px;} */
        #allmap {
            float: right;
            height: 100%;
            width: 80%;
        }

        #r-result {
            float: left;
            height: 80%;
            width: 20%;
            overflow: auto;
            text-align: center
        }

        #list {
            position: fixed;
            top: -16px;
        }

        #title {
            position: fixed;
            top: 5px;
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=yG1oIT3iyDPPLfA3W1SGAefmnv7ZcAwX"></script>
    <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- WGS84转BD09 start-->
    <script src="https://unpkg.com/gcoord/dist/gcoord.js"></script>
    <!-- end -->
    <title>UAV_trace</title>
</head>
<!-- 框架测试start -->

<!-- end -->
<body>
<div id="allmap"></div>

<div id="r-result">
    <div id="list">
        <p style="background-color:rgb(0, 255, 221)">经纬度数据(WGS84坐标)</p>
    </div>
    <div id="title">
        <p style="background-color:rgb(0, 255, 221)">ID | Time | Longitude | Latitude</p>
    </div>
    <p>&nbsp</p>
    <div id="list_result" style="font-size: 90%"></div>
</div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(104.19661300388302, 30.656050837664434), 20);         //成都大学10教 30.656050837664434 104.19661300388302
    map.enableScrollWheelZoom(true);

    $(document).ready(function () {
        // 列表 list
        $('#list').click(function () {
            $.getJSON('/ajax_list/', function (ret) {

                //
                $('#list_result').append(ret[2] + ",  " + ret[3] + ",  " + ret[0].toFixed(6) + ",  " + ret[1].toFixed(6) + "<br />");
                // $('#list_result').append("纬度：" + ret[1]+"<br />" );


                // WGS84坐标
                var result = gcoord.transform(
                    [ret[0], ret[1]],    // 经纬度坐标
                    gcoord.WGS84,               // 当前坐标系
                    gcoord.BD09                 // 目标坐标系
                );
                //BD09坐标
                var longitude = result[0];
                var latitude = result[1];
                var id

                map.clearOverlays();
                var new_point = new BMap.Point(longitude, latitude);
                var marker = new BMap.Marker(new_point);  // 创建标注
                map.addOverlay(marker);              // 将标注添加到地图中
                map.panTo(new_point);
                document.getElementById("longitude").innerHTML = longitude;
                document.getElementById("latitude").innerHTML = latitude;

                // $('#list_result').append("经度：" + ret[0]+"<br />" );
                // $('#list_result').append("纬度：" + ret[1]+"<br />" );
            })
        })
    });
</script>
<!-- # 自动点击按钮js -->
<script type="text/javascript">
    function myrefresh() {
        document.getElementById('list').click();
    }

    setInterval("myrefresh()", "300");
</script>